<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<div class="row">
    <form id="form" role="form" method="post" th:action="${action}">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <input class="form-control" id="pProjectPertainToVehicle" name="pProjectPertainToVehicle" type="hidden"
                   th:value="${vehicle.getPuid()}"
            />
            <div class="form-group">
                <label for="pProjectCode">项目编号</label>
                <input class="form-control" id="pProjectCode" name="pProjectCode" type="text"
                       placeholder="请输入项目编号"/>
            </div>
            <div class="form-group">
                <label for="pProjectName">项目名称</label>
                <input class="form-control" id="pProjectName" name="pProjectName" type="text"
                       placeholder="请输入项目名称"/>
            </div>
            <div class="form-group">
                <input id="projectManagerId" name="projectManagerId" type="hidden"
                />
                <label for="pProjectManager">项目经理:<a id="selectUserBtn" href="javascript:void(0)">显示组织架构</a></label>
                <input class="form-control" id="pProjectManager" name="pProjectManager" type="text"
                       placeholder="请选择项目经理" readonly="readonly"
                />
                <!--<button type="button" class="btn btn-primary select" id="selectUserBtn">显示</button>-->
            </div>
            <div class="form-group">
                <label for="pProjectDetail">项目描述</label>
                <input class="form-control" id="pProjectDetail" name="pProjectDetail" type="text"
                       placeholder="请输入项目描述" onfocus=""
                />
            </div>
            <div class="form-group">
                <label for="pInColorCode">内饰颜色代码</label>
                <input class="form-control" id="pInColorCode" name="pInColorCode" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pInColorName">内饰颜色名称</label>
                <input class="form-control" id="pInColorName" name="pInColorName" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pColorCode">颜色代码</label>
                <input class="form-control" id="pColorCode" name="pColorCode" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pColorName">颜色名称</label>
                <input class="form-control" id="pColorName" name="pColorName" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pBatteryModel">电池型号</label>
                <input class="form-control" id="pBatteryModel" name="pBatteryModel" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pMotorModel">电机型号</label>
                <input class="form-control" id="pMotorModel" name="pMotorModel" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pVehicleShapeCode">车身形式代码</label>
                <input class="form-control" id="pVehicleShapeCode" name="pVehicleShapeCode" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pVehicleTranName">车身变形名称</label>
                <input class="form-control" id="pVehicleTranName" name="pVehicleTranName" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pModelYearCode">车型年代码</label>
                <input class="form-control" id="pModelYearCode" name="pVehicleAnnualCode" type="text"
                />
            </div>
            <div class="form-group">
                <label for="pModelYear">车型年</label>
                <input class="form-control" id="pModelYear" name="pModelYear" type="text"
                />
            </div>
            <!--不可编辑部分-->
            <!--车型-->
            <div class="form-group">
                <label for="pVehicleCode">车型代码</label>
                <input class="form-control" id="pVehicleCode" name="pVehicleCode" type="text"
                       th:value="${vehicle.getpVehicleCode()}" disabled="disabled"
                />
            </div>
            <div class="form-group">
                <label for="pVehicleName">车型名称</label>
                <input class="form-control" id="pVehicleName" name="pVehicleName" type="text"
                       th:value="${vehicle.getpVehicleName()}" disabled="disabled"
                />
            </div>
            <!--平台-->
            <div class="form-group">
                <label for="pPlatformCode">平台代码</label>
                <input class="form-control" id="pPlatformCode" name="pPlatformCode" type="text"
                       th:value="${platform.getpPlatformCode()}" disabled="disabled"
                />
            </div>
            <div class="form-group">
                <label for="pPlatformName">平台名称</label>
                <input class="form-control" id="pPlatformName" name="pPlatformName" type="text"
                       th:value="${platform.getpPlatformName()}" disabled="disabled"
                />
            </div>
            <!--品牌-->
            <div class="form-group">
                <label for="pBrandCode">品牌代码</label>
                <input class="form-control" id="pBrandCode" name="pBrandCode" type="text"
                       th:value="${brand.getpBrandCode()}" disabled="disabled"
                />
            </div>
            <div class="form-group">
                <label for="pBrandName">中文品牌</label>
                <input class="form-control" id="pBrandName" name="pBrandName" type="text"
                       th:value="${brand.getpBrandName()}" disabled="disabled"
                />
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3" id="userList" style="display: none;">
            <ul id="orgGroupTree" class="ztree" style="width:200px; overflow:auto;"></ul>
        </div>
    </form>
</div>

<script th:inline="javascript">
    <![CDATA[
    var setting = {
        check: {
            enable: false
        },
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "uid",
                pIdKey: "pUid",
                rootPId: "0"
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj('orgGroupTree');
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    return true;
                }
            },
            onClick: function (event, treeId, treeNode) {
                let userId = treeNode.uid;
                $.ajax({
                    type: "GET",
                    //ajax需要添加打包名
                    url: "./vwo/getUserDetail?uid=" + userId,
                    success: function (result) {
                        if (result.status) {
                            $("#projectManagerId").val(result.personId);
                            $("#pProjectManager").val(result.personName);
                            var bootstrapValidator = $("#form", window.top.document).data('bootstrapValidator');
                            bootstrapValidator.revalidateField("pProjectManager");
                        }
                    },
                    error: function (e) {
                        console.error("连接服务器异常:" + e.status);
                    }
                });
            }
        }
    };
    $(
        initZTree = function () {
            $.post("./vwo/getUserAndGroup", function (info) {
                var t = $("#orgGroupTree");
                t = $.fn.zTree.init(t, setting, info.data);
            })
        }
    );

    $(function () {
        $('#form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                pProjectCode: {
                    message: '项目编号验证失败',
                    validators: {
                        notEmpty: {
                            message: '项目编号不能为空'
                        },
                        threshold: 1, //有1字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: 'project/validateProjectCodeWithPuid',//验证地址
                            message: '项目编号已存在',//提示消息
                            delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            // *自定义提交数据，默认值提交当前input value
                            data: function (validator) {
                                return {
                                    puid: $('#puid').val(),
                                    pProjectCode: $("#pProjectCode").val()
                                };
                            },
                            type: 'POST'//请求方式
                        }
                    }
                },
                pProjectName: {
                    message: '项目名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '项目名称不能为空'
                        }
                    }
                },
                pProjectManager: {
                    message: '没有选择项目经理',
                    validators: {
                        notEmpty: {
                            message: '项目经理不能为空,请选择'
                        }
                    }
                }
            }
        });
        // 绑定dialog的确定按钮的监听事件
        $("#btnOk", window.top.document).click(function () {
            var bootstrapValidator = $("#form", window.top.document).data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                var url = $("#form", window.top.document).attr('action');
                <!--其实不要puid，puid会在服务器上生成-->
                var data = {};
                var _d = $("#form").serializeArray();
                for (var p in _d) {
                    data[_d[p].name] = _d[p].value;
                }
                $.ajax({
                    type:
                        'POST',
                    contentType:
                        "application/json",
                    url: url,
                    data: JSON.stringify(data),
                    success:
                        function (result) {
                            // $('.modal-dialog', window.top.document).parent('div').remove()
                            // $('body', window.top.document).find('.modal-backdrop').remove();
                            // jquery 调用刷新当前操作的table页面的refresh方法
                            var zTree = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.zTree;
                            var selectNode = $(window.parent.document).contents().find(".tab-pane.fade.active.in iframe")[0].contentWindow.selectNode;
                            activeTabBodyReset();
                            if (result.status == 1) {
                                var entity = result.entity;
                                zTree.addNodes(selectNode, {
                                    puid: entity.puid,
                                    pPuid: entity.pProjectPertainToVehicle,
                                    name: entity.pProjectName
                                });
                                if (result.status1 == 0 || result.status2 == 0) {
                                    window.Ewin.alert({message: "<br>" + result.dxgMainMsg + "<br>" + result.cfgMsg});
                                }
                                else {
                                    layer.msg('添加项目成功', {icon: 1, time: 2000})
                                }
                            }
                            else if (result.status == 0) {
                                window.Ewin.alert({message: "已存在的项目代码，请修改或者更换项目代码"});
                            }
                            else {
                                window.Ewin.alert({message: "添加失败，请联系管理员"});
                            }

                        },
                    error: function (status) {
                        window.Ewin.alert({message: status.status + ':添加数据失败!'});
                    }
                });
            }
        });
        $("#selectUserBtn").click(function(){
            var selectUserBtn = $("#selectUserBtn").html();
            if(selectUserBtn=='显示组织架构'){
                // 设置dialog的宽度
                $(".modal-content",window.top.document).css("width","700px");
                // 设置form表单的宽度比
                $(".row").find("div").eq(0).attr("class", "col-lg-8 col-md-8 col-sm-8");
                // 显示组织架构菜单数
                $("#orgGroupTree").parent("div").show();
                // 将按钮改为隐藏
                $("#selectUserBtn").html("隐藏组织架构");
            }else{
                // 设置dialog的宽度
                $(".modal-content",window.top.document).css("width","500px");
                // 设置form表单的宽度比
                $(".row").find("div").eq(0).attr("class", "col-lg-12 col-md-12 col-sm-12");
                // 显示组织架构菜单数
                $("#orgGroupTree").parent("div").hide();
                // 将按钮改为显示
                $("#selectUserBtn").html("显示组织架构");
            }
        })
    })
    ]]>
</script>
<script th:src="@{/layer/layer.js}"></script>
</body>
</html>